// components/VideoCard.tsx
import React, { useState } from 'react';
import { FlowerVideo } from './types';
import './Video.css'
interface VideoCardProps {
  video: FlowerVideo;
}

const VideoCard: React.FC<VideoCardProps> = ({ video }) => {
  const [isHovered, setIsHovered] = useState(false);
  const [isFavorite, setIsFavorite] = useState(false);

  // 处理收藏点击
  const handleFavorite = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsFavorite(!isFavorite);
  };

  // 模拟下载功能
  const handleDownload = (e: React.MouseEvent) => {
    e.stopPropagation();
    alert(`开始下载: ${video.title}`);
  };

  return (
    <div 
      className="video-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="thumbnail">
        <img src={video.imageUrl} alt={video.title} />
        
        {/* 播放按钮 - 始终可见 */}
        <div className="play-button">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="11.5" fill="white" stroke="rgba(0,0,0,0.2)"/>
            <path d="M9.5 16.3974V7.60255C9.5 7.08776 10.0708 6.77228 10.5091 7.04632L16.4719 10.9438C16.8694 11.1923 16.8694 11.8077 16.4719 12.0562L10.5091 15.9537C10.0708 16.2277 9.5 15.9122 9.5 15.3974V16.3974Z" fill="rgba(0,0,0,0.8)"/>
          </svg>
        </div>
        
        {/* 悬停时显示的操作按钮 */}
        {isHovered && (
          <div className="hover-actions">
            <button 
              className="download-btn"
              onClick={handleDownload}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 16L12 3M12 16L8 12M12 16L16 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M3 17L3 20L21 20L21 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
              下载
            </button>
            <button 
              className={`favorite-btn ${isFavorite ? 'active' : ''}`}
              onClick={handleFavorite}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4.5C8.5 2.5 5.5 3.5 4 5.5C2.5 7.5 2.5 11 4.5 14C6.5 17 9.5 20 12 21.5C14.5 20 17.5 17 19.5 14C21.5 11 21.5 7.5 20 5.5C18.5 3.5 15.5 2.5 12 4.5Z" 
                      stroke="currentColor" 
                      strokeWidth="2" 
                      strokeLinejoin="round"
                      fill={isFavorite ? "currentColor" : "none"}/>
              </svg>
              {isFavorite ? '已收藏' : '收藏'}
            </button>
          </div>
        )}
      </div>
      
      <div className="video-info">
        <h3>{video.title}</h3>
        <p>{video.description}</p>
        <span className="high-definition">高清实拍</span>
      </div>
    </div>
  );
};

export default VideoCard;